<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2 style="font-weight: bold; color: #409EFF;">法律援助后台管理系统</h2>
        <p>
          本系统是为法律援助机构设计的综合性管理平台，旨在提高法律援助工作效率，规范案件管理流程，加强数据统计分析能力。系统整合了案件受理、律师分配、进度跟踪、档案管理等功能模块，为法律援助工作提供全方位的技术支持。
        </p>
        <p>
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
        <p>
          <el-tag type="danger">免费使用</el-tag>
        </p>
        <p>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-document"
            plain

            @click="goTarget('https://gitee.com/group8_8/legal_aid')"

          >项目仓库</el-button
          >
          <el-button
            size="mini"
            icon="el-icon-s-home"
            plain

          >系统官网</el-button
          >
        </p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 200px">
        <el-row>
          <el-col :span="24">
            <h2>技术架构</h2>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" style="padding-right: 10px">
            <h4>后端技术</h4>
            <ul class="tech-list">
              <li>Spring Boot</li>
              <li>Spring Security</li>
              <li>MyBatis Plus</li>
              <li>Redis</li>
              <li>MySQL</li>
              <li>Elasticsearch</li>
              <li>...</li>
            </ul>
          </el-col>
          <el-col :span="12">
            <h4>前端技术</h4>
            <ul>
              <li>Vue 3</li>
              <li>Element Plus</li>
              <li>Vuex</li>
              <li>Axios</li>
              <li>ECharts</li>
              <li>Quill</li>
              <li>...</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 新增服务优势板块 -->
    <el-row :gutter="20" style="margin-top: 30px;">
      <el-col :span="24">
        <h2 style="font-weight: bold; color: #409EFF; margin-bottom: 20px;">服务优势</h2>
        <el-card>
          <ul class="advantage-list">
            <li>
              <i class="el-icon-star-off"></i>
              <h4>专业团队</h4>
              <p>汇聚资深律师和法律专家</p>
            </li>
            <li>
              <i class="el-icon-lightning"></i>
              <h4>快速响应</h4>
              <p>7×12小时在线服务</p>
            </li>
            <li>
              <i class="el-icon-s-help"></i>
              <h4>公益属性</h4>
              <p>符合条件可申请免费代理</p>
            </li>
            <li>
              <i class="el-icon-s-data"></i>
              <h4>数据安全</h4>
              <p>严格保护用户隐私</p>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>

    <el-divider />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>联系我们</span>
          </div>
          <div class="body">
            <p>
              <i class="el-icon-s-promotion"></i> 官网：<el-link
              href="http://legal-aid.example.com"
              target="_blank"
            >http://legal-aid.example.com</el-link
            >
            </p>
            <p>
              <i class="el-icon-phone"></i> 联系电话：<span>010-12345678</span>
            </p>
            <p>
              <i class="el-icon-message"></i> 电子邮箱：<a
              href="mailto:support@legal-aid.example.com"
            >support@legal-aid.example.com</a
            >
            </p>
            <p>
              <i class="el-icon-chat-dot-round"></i> 在线咨询：<a
              href="javascript:;"
            >点击咨询</a
            >
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>系统公告</span>
          </div>
          <el-collapse accordion>

            <ol>
              <li>新增案件统计分析模块</li>
              <li>优化律师分配算法</li>
              <li>增加电子签名功能</li>
              <li>修复案件进度更新不及时问题</li>
              <li>升级Spring Boot到3.2.0版本</li>
              <li>其他细节优化</li>
            </ol>


          </el-collapse>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>数据概览</span>
          </div>
          <div class="body">
            <el-row :gutter="20" style="margin-bottom: 15px">
              <el-col :span="12">
                <div class="grid-content">

                  <h4>今日新增订单</h4>
                  <p style="font-size: 24px; color: #409EFF">{{ stats.todayOrders }} </p>

                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content">

                  <h4>总订单</h4>
                  <p style="font-size: 24px; color: #E6A23C">{{ stats.totalOrders }} </p>



                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="grid-content">

                  <h4>有效订单</h4>
                  <p style="font-size: 24px; color: #67C23A">{{ stats.paidOrders }}</p>


                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content">

                  <h4>待处理订单</h4>
                  <p style="font-size: 24px; color: #909399">{{ stats.cancelledOrders }}</p>


                </div>
              </el-col>
            </el-row>
            <!-- <div style="margin-top: 20px">
              <el-progress
                type="dashboard"
                :percentage="75"
                :color="colors"
                style="width: 180px; margin: 0 auto"
              />
              <p style="text-align: center; margin-top: 10px">案件处理进度</p>
            </div> -->
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {getStatistics} from "@/api/lawyer_aid/order"

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "1.0.1",
      colors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}

      ],

      // 新增统计数据变量
      stats: {
        totalOrders: 0,
        todayOrders: 0,
        paidOrders: 0,
        cancelledOrders: 0
      }
    }
  },
  mounted() {
    this.fetchOrderStatistics();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank")
    },

    // 新增数据获取方法
    async fetchOrderStatistics() {
      try {
        const res = await getStatistics(); // 调用 API
        if (res.code === 200) { // 假设接口返回标准格式
          this.stats = res.data; // 将数据赋值给 stats
        } else {
          this.$message.error("获取数据失败");
        }
      } catch (error) {
        console.error("请求失败:", error);
        this.$message.error("网络请求失败");
      }
    }

  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  .grid-content {
    border-radius: 4px;
    min-height: 80px;
    padding: 15px;
    background: #f5f7fa;
    text-align: center;

    h4 {
      color: #909399;
      font-size: 14px;
      margin-bottom: 10px;
    }

    p {
      margin: 0;
      font-weight: bold;
    }
  }

  .advantage-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 20px;

    li {
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
      text-align: center;

      i {
        font-size: 24px;
        color: #409EFF;
        margin-bottom: 10px;
      }

      h4 {
        color: #333;
        margin-bottom: 5px;
      }

      p {
        font-size: 12px;
        color: #666;
      }
    }
  }
}
</style>
